<template>
  <div class="application-detail">
    <el-descriptions title="基本信息" :column="2" border>
      <el-descriptions-item label="申请编号">
        {{ application.id }}
      </el-descriptions-item>
      <el-descriptions-item label="申请类型">
        {{ getApplicationType(application.type) }}
      </el-descriptions-item>
      <el-descriptions-item label="申请状态">
        <el-tag :type="getStatusType(application.status)">
          {{ application.status }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="申请日期">
        {{ formatDate(application.applyDate) }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="申请人信息" :column="2" border class="mt-4">
      <el-descriptions-item label="用户编号">
        {{ application.user.id }}
      </el-descriptions-item>
      <el-descriptions-item label="用户名">
        {{ application.user.name }}
      </el-descriptions-item>
      <el-descriptions-item label="年级">
        {{ application.user.grade }}
      </el-descriptions-item>
      <el-descriptions-item label="专业">
        {{ application.user.major }}
      </el-descriptions-item>
      <el-descriptions-item label="班级">
        {{ application.user.class }}
      </el-descriptions-item>
      <el-descriptions-item label="联系方式">
        {{ application.user.contact }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 创建社团申请 -->
    <template v-if="application.type === 5">
      <el-descriptions title="创建社团信息" :column="2" border class="mt-4">
        <el-descriptions-item label="社团名称">
          {{ application.clubInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="社团标签"
          ><el-tag
            v-for="tag in application.clubInfo.tags"
            :key="tag"
            class="mr-2"
          >
            {{ tag }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <div class="club-description mt-4">
        <h3>社团简介</h3>
        <el-input
          type="textarea"
          v-model="application.clubInfo.description"
          :rows="4"
          readonly
        />
      </div>
    </template>

    <!-- 注销社团申请 -->
    <template v-if="application.type === 6">
      <el-descriptions title="注销社团信息" :column="2" border class="mt-4">
        <el-descriptions-item label="社团编号">
          {{ application.clubInfo.id }}
        </el-descriptions-item>
        <el-descriptions-item label="社团名称">
          {{ application.clubInfo.name }}
        </el-descriptions-item></el-descriptions
      >
      <el-descriptions
        title="社长信息"
        :column="2"
        border
        class="mt-4"
        v-if="application.clubInfo.president"
      >
        <el-descriptions-item label="用户编号">
          {{ application.clubInfo.president.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ application.clubInfo.president.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年级">
          {{ application.clubInfo.president.grade }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ application.clubInfo.president.major }}
        </el-descriptions-item>
        <el-descriptions-item label="班级">
          {{ application.clubInfo.president.class }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ application.clubInfo.president.contact }}
        </el-descriptions-item>
      </el-descriptions>
    </template>

    <!-- 修改社团信息申请 -->
    <template v-if="application.type === 7">
      <el-descriptions title="修改后社团信息" :column="2" border class="mt-4">
        <el-descriptions-item label="社团名称">
          {{ application.clubInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="社团标签">
          <el-tag
            v-for="tag in application.clubInfo.tags"
            :key="tag"
            class="mr-2"
          >
            {{ tag }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="社团简介">
          {{ application.clubInfo.description }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        title="新社长信息"
        :column="2"
        border
        class="mt-4"
        v-if="application.clubInfo.president"
      >
        <el-descriptions-item label="用户编号">
          {{ application.clubInfo.president?.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ application.clubInfo.president?.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年级">
          {{ application.clubInfo.president?.grade }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ application.clubInfo.president?.major }}
        </el-descriptions-item>
        <el-descriptions-item label="班级">
          {{ application.clubInfo.president?.class }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ application.clubInfo.president?.contact }}
        </el-descriptions-item>
      </el-descriptions>
    </template>

    <div class="application-reason mt-4">
      <h4>申请原因</h4>
      <el-input
        type="textarea"
        v-model="application.reason"
        :rows="4"
        readonly
      />
    </div>

    <div class="review-info mt-4">
      <h3>审核信息</h3>
      <el-descriptions :column="2" border v-if="application.review.id">
        <el-descriptions-item label="审核结果">
          <el-tag :type="getStatusType(application.review.result)">
            {{ application.review.result }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核时间">
          {{ formatDate(application.review.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核人">
          {{ application.review.userVO.userName }} </el-descriptions-item
        ><el-descriptions-item label="审核人联系方式">
          {{ application.review.userVO.phoneNumber }}
        </el-descriptions-item>
      </el-descriptions>
      <el-input
        v-if="application.review.id"
        type="textarea"
        v-model="application.review.content"
        :rows="4"
        readonly
        placeholder="审核意见"
        class="mt-2"
      /><el-empty v-else description="暂无审核信息" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  ElMessage,
  ElTag,
  ElDescriptions,
  ElDescriptionsItem,
  ElInput,
  ElEmpty,
} from "element-plus";
import moment from "moment";
import { useRoute } from "vue-router";
import { ClubApplicationControllerService } from "../../../../generated";

interface ClubApplicationInfo {
  id: number;
  type: number;
  status: string;
  applyDate: string;
  reason: string;
  user: {
    id: number;
    name: string;
    grade: string;
    major: string;
    class: string;
    contact: string;
  };
  clubInfo: {
    id?: number;
    name: string;
    tags?: string[];
    description?: string;
    president?: {
      id: number;
      name: string;
      grade: string;
      major: string;
      class: string;
      contact: string;
    };
  };
  review: {
    id: number;
    result: string;
    content: string;
    createTime: string;
    userVO: {
      userName: string;
      phoneNumber: string;
    };
  };
}

const application = ref<ClubApplicationInfo>({
  id: 0,
  type: 0,
  status: "",
  applyDate: "",
  reason: "",
  user: {
    id: 0,
    name: "",
    grade: "",
    major: "",
    class: "",
    contact: "",
  },
  clubInfo: {
    id: 0,
    name: "",
    tags: [],
    description: "",
    president: {
      id: 0,
      name: "",
      grade: "",
      major: "",
      class: "",
      contact: "",
    },
  },
  review: {
    id: 0,
    result: "",
    content: "",
    createTime: "",
    userVO: {
      userName: "",
      phoneNumber: "",
    },
  },
});

const getApplicationType = (type: number): string => {
  switch (type) {
    case 5:
      return "创建社团";
    case 6:
      return "注销社团";
    case 7:
      return "修改社团信息";
    default:
      return "";
  }
};

const formatDate = (date: string): string => {
  return moment(date).format("YYYY年MM月DD日 HH:mm:ss");
};

const getStatusType = (status: string) => {
  switch (status) {
    case "待审核":
      return "warning";
    case "通过":
      return "success";
    case "拒绝":
      return "danger";
    default:
      return "info";
  }
};

const loadData = async () => {
  const route = useRoute();
  const applicationId = Number(route.query.id);
  try {
    const res =
      await ClubApplicationControllerService.getApplicationVoById1(
        applicationId,
      );
    if (res.code === 0 && res.data) {
      application.value = {
        id: res.data.id as number,
        type: res.data.type as number,
        status: res.data.reviewVO?.result as string,
        applyDate: res.data.createTime as string,
        reason: res.data.reason as string,
        user: {
          id: res.data.userVo?.id as number,
          name: res.data.userVo?.userName as string,
          grade: res.data.userVo?.grade as string,
          major: res.data.userVo?.major as string,
          class: res.data.userVo?.userClass as string,
          contact: res.data.userVo?.phoneNumber as string,
        },
        review: {
          id: res.data.reviewVO?.id as number,
          result: res.data.reviewVO?.result as string,
          content: res.data.reviewVO?.content as string,
          createTime: res.data.reviewVO?.createTime as string,
          userVO: {
            userName: res.data.reviewVO?.userVO?.userName as string,
            phoneNumber: res.data.reviewVO?.userVO?.phoneNumber as string,
          },
        },
      } as ClubApplicationInfo;

      const type = res.data.type as number;
      if (type === 5) {
        application.value.clubInfo = {
          id: 0,
          name: res.data.clubName as string,
          tags: res.data.clubTags as string[],
          description: res.data.clubIntroduction as string,
        };
      } else if (type === 6) {
        application.value.clubInfo = {
          id: res.data.clubVo?.id,
          name: res.data.clubVo?.clubName as string,
        };
      } else {
        application.value.clubInfo = {
          id: res.data.clubVo?.id,
          name: res.data.clubName as string,
          tags: res.data.clubTags as string[],
          description: res.data.clubIntroduction as string,
          president: {
            id: res.data.newManager?.id as number,
            name: res.data.newManager?.userName as string,
            grade: res.data.newManager?.grade as string,
            major: res.data.newManager?.major as string,
            class: res.data.newManager?.userClass as string,
            contact: res.data.newManager?.phoneNumber as string,
          },
        };
      }
    } else {
      ElMessage.error("加载申请数据失败: " + res.message);
    }
  } catch (error) {
    console.error("加载数据时发生错误:", error.message || error);
    ElMessage.error("加载数据失败，请稍后重试");
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.application-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.club-description,
.review-info {
  margin-bottom: 20px;
}

.application-reason {
  margin-bottom: 40px;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

@media (max-width: 768px) {
  .application-detail {
    padding: 10px;
  }

  h3 {
    font-size: 16px;
  }
}
</style>
